//获取验证码
const vcode = document.querySelector('.reg_form ul li .vcode')
let flag = true
vcode.addEventListener('click', () => {
  if (flag) {
    flag = false
    let i = 15
    vcode.innerHTML = `${i}秒后重新获取`
    let timerId = setInterval(() => {
      i--
      i = i < 10 ? '0' + i : i
      vcode.innerHTML = `${i}秒后重新获取`
      if (i === '00') {
        clearInterval(timerId)
        vcode.innerHTML = '重新获取'
        flag = true
      }
    }, 1000)
  }
})

//验证用户名
const uname = document.querySelector('#uname')
uname.addEventListener('change', verigyName)
function verigyName() {
  const prompt = uname.nextElementSibling
  if (/^[\s]*$/.test(uname.value)) {
    prompt.className = 'error'
    prompt.innerHTML = '<i class="error_icon"></i>用户名不能为空'
    return false
  } else if (/^[^a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(uname.value)) {
    prompt.className = 'error'
    prompt.innerHTML = '<i class="error_icon"></i>用户名不能只有特殊字符'
    return false
  }
  prompt.className = 'success'
  prompt.innerHTML = '<i class="success_icon"></i>输入通过'
  return true
}

//验证手机号
const cpnum = document.querySelector('#cpnum')
cpnum.addEventListener('change', verigyCpnum)
function verigyCpnum() {
  const prompt = cpnum.nextElementSibling
  const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
  if (!reg.test(cpnum.value)) {
    prompt.className = 'error'
    prompt.innerHTML = '<i class="error_icon"></i>请输入正确的手机号码'
    return false
  }
  prompt.className = 'success'
  prompt.innerHTML = '<i class="success_icon"></i>输入通过'
  return true
}

//验证验证码
const inputcode = document.querySelector('#vcode')
inputcode.addEventListener('change', verigyCode)
function verigyCode() {
  const reg = /^\d{4}$/
  if (!reg.test(inputcode.value)) {
    alert('请输入4位数字验证码')
    return false
  }
  return true
}

//验证密码框
const password = document.querySelector('#password')
password.addEventListener('change', verigyPassword)
function verigyPassword() {
  const prompt = password.nextElementSibling
  const reg = /^(?!\s)(?=.*\d)[^\s]{6,18}$/
  if (!reg.test(password.value)) {
    prompt.className = 'error'
    prompt.innerHTML = '<i class="error_icon"></i>请输入包含数字的6~18位密码'
    return false
  } else if (/^[\s]*$/.test(password.value)) {
    prompt.className = 'error'
    prompt.innerHTML = '<i class="error_icon"></i>密码不能为空'
    return false
  }
  prompt.className = 'success'
  prompt.innerHTML = '<i class="success_icon"></i>输入通过'
  return true
}

//再次密码验证
const confirm = document.querySelector('#confirm')
confirm.addEventListener('change', verigyConfirm)
function verigyConfirm() {
  const prompt = confirm.nextElementSibling
  if (confirm.value !== password.value) {
    prompt.className = 'error'
    prompt.innerHTML = '<i class="error_icon"></i>两次密码请输入一致'
    return false
  } else if (/^[\s]*$/.test(confirm.value)) {
    prompt.className = 'error'
    prompt.innerHTML = '<i class="error_icon"></i>密码不能为空'
    return false
  }
  prompt.className = 'success'
  prompt.innerHTML = '<i class="success_icon"></i>验证通过'
  return true
}


//表单提交
const form = document.querySelector('form[name="register"]')
const agree = document.querySelector('input[name="agree"]')
form.addEventListener('submit', e => {
  //阻止默认跳转
  e.preventDefault()
  //判断是否勾选同意协议
  if (!agree.checked) {
    alert('请勾选同意协议')
    return false
  }
  //表单验证
  if (!verigyName()) return false
  if (!verigyCpnum()) return false
  if (!verigyCode()) return false
  if (!verigyPassword()) return false
  if (!verigyConfirm()) return false

  //获取本地存储用户数据
  const existingUsers = JSON.parse(localStorage.getItem('users')) || []

  //检测用户名和手机号是否被注册，不能相同
  const isUserExist = existingUsers.some(user =>
    user.uname === uname.value.trim() || user.phone === cpnum.value.trim()
  )
  if (isUserExist) {
    alert('用户名或手机号已被注册')
    return false
  }

  //创建新用户对象
  const newUser = {
    id: Date.now(),
    uname: uname.value.trim(),
    phone: cpnum.value.trim(),
    password: password.value.trim(),
    registerTime: new Date().toLocaleString(),
    lastLogin: null
  }

  //追加数组对象
  existingUsers.push(newUser)

  //本地存储
  localStorage.setItem('users', JSON.stringify(existingUsers))

  alert('注册成功！请登录')
  location.href = '../login.html'
})